import './tab_content.css'
// import template from './tab_content.tet'
const tab_content = document.querySelector('#tab-content')

//接收li标签的属性
export function del(title) {
  //使用属性选择器找到和li标签相同的内容，找到后删除
  const ele = tab_content.querySelector(`[data-name = ${title}]`)
  if (ele) {
    ele.remove()
  }
}

export default (template, title) => {
  //先看数据是否载入过
  let key = false;
  [...tab_content.children].forEach(item => {
    if (item.dataset.name == title) {
      item.style.display = 'block'
      key = true
    }
    else {
      item.style.display = 'none'
    }
  })
  if (!key && title != '') {
    const div = document.createElement('div')
    //给相应的内容给上相应的属性
    div.dataset.name = title
    import(`../${template}/${template}.tet`).then(result => {
      div.innerHTML = result.default;
    })
    import(`../${template}/${template}.js`).then(result => {
      result.default();
    })
    import(`../${template}/${template}.css`)

    tab_content.appendChild(div)
  }
}
